<template>
  <div class="myRoles">
    <div class="head">
      <span class="role">我的角色</span>
      <span class="control">管理<span class="iconfont icon-guanli"></span></span>
    </div>
    <div class="showplace">
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fdd2a72e865bb7e487b515941fec3ed61e98e9a33.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648177749&t=7dad160289e2fad0b619544868dde924" alt="">
      <dl class="infor">
        <dd class="name">{{newdata.name}}</dd>
        <dd class="lv">天空岛{{newdata.Level}}级</dd>
      </dl>
      <div class="detail">
        <dl class="once">
          <dd class="num">{{newdata.days}}</dd>
          <dd class="tian">活跃天数</dd>
        </dl>
        <dl class="once">
          <dd class="num">{{newdata.roles}}</dd>
          <dd class="tian">获得角色数</dd>
        </dl>
        <dl class="once">
          <dd class="num">{{newdata.achievements}}</dd>
          <dd class="tian">成就达成数</dd>
        </dl>
        <dl class="once">
          <dd class="num">{{newdata.shenyuan}}</dd>
          <dd class="tian">深境螺旋</dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created(){
    this.$store.dispatch('getinformation',{url:"/data/wode/information"})
  },
  computed:{
    newdata(){
      return this.$store.state.information.data;
    }
  },
}
</script>

<style scoped>
  .myRoles{
    min-height: 2rem;
    /* background-color: yellowgreen; */
    padding: .15rem 0;
  }
  .myRoles .head{
    height: .29rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .myRoles .head .role{
    font-weight: 700;
  }
  .myRoles .head .control{
    color: rgb(155,155,155);
    vertical-align: middle;
  }
  .icon-guanli{
    font-size: .2rem;
  }
  .myRoles .showplace{
    width: 100%;
    height: 1.4rem;
    /* background-color: yellow; */
    border-radius: .1rem;
    overflow: hidden;
    position: relative;
  }
  .myRoles .showplace img{
    width: 100%;
    height: 100%;
  }
  .myRoles .showplace .infor{
    position: absolute;
    color: white;
    top: .1rem;
    left: .15rem;
  }
  .myRoles .showplace .infor .name{
    font-weight: 700;
  }
  .myRoles .showplace .infor .lv{
    font-size: .12rem;
  }
  .myRoles .showplace .detail{
    position: absolute;
    height: .63rem;
    width: 100%;
    top: .62rem;
    background-color: rgba(27, 25, 25, 0.8);
    color: white;
    display: flex;
    justify-content: space-around;
  }
  .myRoles .showplace .detail .once{
    width: 24%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* background-color: turquoise; */
  }
  .myRoles .showplace .detail .once .num{
    font-size: .2rem;
    font-weight: 700;
  }
  .myRoles .showplace .detail .once .tian{
    font-size: .12rem;
    color: rgb(200,200,200);
  }
</style>